<template>
    <div class="userFavContainer">
        <el-row v-show="gotSomething" :gutter="15" justify="space-around">
            <el-col :span="6" v-for="(item,index) in UserFavList" :key="index">
                <el-card :body-style="{ padding: '0'}">
                    <img @click="goDetail(item.goods)" :src="item.goods.goodCoverImg" class="image" />
                    <div class="cardContent" :title="item.goods.goodName" style="padding: 8px;">
                        <span>{{item.goods.goodName}}</span>
                        <div class="bottom clearfix price">
                            <time class="time">{{ item.goods.goodPrice }}￥</time>
                        </div>
                        <div class="cardfooter">
                            <el-button @click="removeFav(item,index)" size="mini" type="danger">删除收藏</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div v-show="!gotSomething" class="whennone">
            <el-link @click="goproducts" style="font-size:20px" type="primary">空空,去逛逛吧~！</el-link>
        </div>
    </div>
</template>

<script>
import { log } from "util";
export default {
    data() {
        return {
            UserFavList: [],
            gotSomething: true
        };
    },
    methods: {
        // 获取用户收藏列表
        getFavList() {
            this.UserFavList = this.$store.getters.getUserFavList;
            if (this.UserFavList.length > 0) {
                this.gotSomething = true;
            } else {
                this.gotSomething = false;
            }
        },
        // 点击图片跳转详情
        goDetail(item) {
            this.$router.push({ name: "details", params: { id: item.id } }); // 这里使用路由传参的方式将id传到详细页
        },
        // 去逛逛
        goproducts() {
            this.$router.push({ name: "products" });
        },
        // 删除收藏商品
        removeFav(item, index) {
            this.$ajax.delete("fav/" + item.id).then(res => {
                this.$message({
                    message: "删除成功",
                    type: "success"
                });
                this.UserFavList.splice(index, 1);
                this.$store.commit("updateUserFavList", this.UserFavList);
            });
        }
    },
    mounted() {
        this.getFavList();
    }
};
</script>


<style lang="scss" scoped>
.userFavContainer {
    img {
        width: 100%;
        height: 100%;
    }
    .el-card {
        margin: 4px;
    }
    .cardContent {
        text-align: center;
        white-space: nowrap;
        // text-overflow:ellipsis;
        span {
            font-size: 12px;
            color: #ccc;
            display: inline-block;
            width: 100%;
            // white-space: nowrap;
            //text-overflow:'...';
        }
        .price {
            font-size: 14px;
            color: red;
        }
        .cardfooter {
            margin-top: 5px;
            display: flex;
            justify-content: space-around;
        }
    }
    .whennone {
        width: auto;
        height: 350px;
        background-color: #ccc;
        text-align: center;
        display: flex;
        opacity: 0.5;
        border-radius: 5px;
        flex-direction: column;
        justify-content: center;
        font-size: 18px;
    }
}
</style>